<template>
  <Layout desc="使用onWatcherCleanup,当watch条件频繁触发时取消请求">
    <div class="mt-60 text-center">
      <div class="h-10" v-loading="loading">{{ name }}</div>
      <el-button type="primary" @click="id++">发起请求</el-button>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { getAllUser } from '@/api'
// import { myfetch } from '@/utils/fetch'
import { loading } from '@/utils/request'

const id = ref(1)
const name = ref('')

watch(id, async () => {
  const { user } = await getAllUser()
  name.value = user.name
})

// watch(id, async () => {
//   const { user } = await myfetch(`/public/user`, {
//     method: 'GET'
//   })
//   name.value = user.name
// })
</script>

<style scoped lang="scss"></style>
